<template>
  <div class="order-buy">
    <div class="price-wrap">
      <div class="tips">支付金额：</div>
      <div class="price"><span class="unit">&yen;</span><span>{{ resData.price }}</span></div>
    </div>
    
    <!-- 余额，预存款 ， 虚拟库存 ，门店库存 -->
    <div class="item-block item-block2">
      <div class="item-box" v-if="user_balance !=0 && resData.is_open_balance_pay==1" v-show="isShowPayment">
        <van-checkbox class="item-title" v-model="money_type" shape="square" icon-size="14px">
          使用余额
            <i>(余额：<span class="smallsize">{{mSymbol.name}}<b>{{user_balance}}</b></span>)</i>
          <template #icon="money_type">
            <img class="img-icon" :src="money_type.checked ? activeIcon : inactiveIcon" />
          </template>
        </van-checkbox>
      </div>
      
    </div>
    <!-- 其他支付方式 -->
    <div class="item-block item-block2" v-show="isShowOtherPayment && !money_type">
      <pay-ment
        ref="payments"
        @paymentData="paymentData"
        :dzSend="true"
        :isTlfzPay="true"
        v-model="paymentWay"></pay-ment>
    </div>
  
    <!-- 购买协议 -->
    <div v-if="resData.is_open_purchase_agreement==1">
      <!--购买协议弹窗-->
      <van-dialog
        v-model="isShowPurchaseAgreement"
        :title="resData.purchase_agreement_name"
        close-on-click-overlay
        @confirm="closePurchaseAgreement"
        class="common-confirm"
      >
        <div class="purchase_agreement_container">
          <div class="purchase_agreement_box">
            <div class="purchase_agreement_content" v-html="resData.purchase_agreement_content">
            </div>
          </div>
        </div>
      </van-dialog>
      <div class="purchase_agreement">
        <van-checkbox class="purchase_agreement-checkbox" v-model="is_agree_purchase_agreement" checked-color="#F30C23" shape="square" icon-size="14px"></van-checkbox>
        {{resData.purchase_agreement_tips}}<span class="title" @click="showPurchaseAgreement">《{{resData.purchase_agreement_name}}》</span>
      </div>
    </div>
   
    <!-- 支付按钮 -->
    <section class="msettlement_sub">
      <div class="btn-addorder red-gra-btn" @click="openPayPop">提交订单</div>
    </section>
  
    <!-- 正在支付中 -->
    <div class="paypopnote" v-show="isSubmit"><span>正在提交中……</span></div>
  </div>
</template>

<script>
import { isWeixinCient } from '@/utils/validate'
import Store from '@/utils/store'
import { addOrder } from '@/api/order/order.js'
import { formBuy } from '@/api/item/activity'
import payMent from '@/components/Payment'
import Vue from 'vue'
import { Checkbox, CheckboxGroup } from 'vant'
import { Switch, Uploader, Icon } from 'vant'
import { mapGetters } from 'vuex'
import smllpay from '@/smallapp/smallpay'
import { openPage } from '@/utils/utils'
Vue.use(Checkbox).use(CheckboxGroup)
Vue.use(Switch).use(Uploader).use(Icon)
export default Vue.extend({
  components: {
    payMent
  },
  data() {
    return {
      activeIcon: 'https://img.wifenxiao.com/h5-wfx/images/check_icon.png',
      inactiveIcon: 'https://img.wifenxiao.com/h5-wfx/images/uncheck__icon.png',
      money_type: true, //  选用余额
      is_agree_purchase_agreement: false,
      isShowPayment: true,
      isShowOtherPayment: true,
      isShowPurchaseAgreement: false, // 是否显示全球
      paymentWay: '',
      shop_info: {},
      user_balance: '0.00',
      resData: {},
      formData: {
        code: '',
        is_freight: 1
      },
      isSubmit: false
    }
  },
  computed: {
    ...mapGetters(['mSymbol'])
  },
  methods: {
    init() {
      const data = Store.fetch('formBuy')
      data.id = data.biao_dan_id
      this.formData = Object.assign(this.formData, data, true)
      this.getData(formBuy, data)
    },
    // 显示隐藏购买协议
    showPurchaseAgreement() {
      this.isShowPurchaseAgreement = true
    },
    closePurchaseAgreement() {
      this.isShowPurchaseAgreement = false
    },

    // 订单结算
    getData(method, data) {
      this.$loadingWrap.show()
      method(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.resData = res.data
          this.is_wx_pay_h5 = res.data.is_wx_pay_h5
          this.user_balance = res.data.user_balance
          if (parseFloat(res.data.user_balance) <= 0) {
            this.money_type = false
          }
          this.formData.item_id = [res.data.item_id]
          this.formData.num = 1
          this.formData.code = res.data.code
          if (res.data.is_tlfz) {
            this.isShowPayment = false
            this.money_type = false
          }
        } else {
          this.$Error(res.msg)
          setTimeout(() => {
            this.$router.go(-1)
          }, 1000)
        }
      })
    },
    // 是否显示付款详情
    openPayPop() {
      if (this.resData.is_open_purchase_agreement == 1 && !this.is_agree_purchase_agreement) {
        this.$Error(this.resData.purchase_agreement_tips)
        return false
      }
      if (this.is_agree_purchase_agreement) {
        this.formData.is_agree_purchase_agreement = 1
      } else {
        this.formData.is_agree_purchase_agreement = 0
      }
      if (this.paymentWay == 'wxpay') {
        this.formData.type = 2
      } else if (this.paymentWay == 'tlfzWxpay') {
        this.formData.type = 26
        this.formData.tlfz_pay_type = 1
      } else if (this.paymentWay == 'tlwxpay') { // 通联支付
        this.formData.type = 19
        this.formData.allinpay = 1
      }
      if (this.money_type) {
        this.formData.money_type = 2
      } else {
        this.formData.money_type = ''
      }
      this.clickSubmitOrder()
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    // 提交订单
    clickSubmitOrder() {
      this.isSubmit = true
      addOrder(this.formData).then(res => {
        this.isSubmit = false
        if (res.status == 1) {
            // 微信支付
            if ((this.formData.type == 2 || this.formData.type == 19 || (this.formData.type == 26 && !res.data.is_mini_vsp)) && res.data.jsApiParameters) {
              smllpay.wxOrderPay(res.data.jsApiParameters)
            } else if (this.formData.type == 26 && res.data.is_mini_vsp) {
              this.Jump('/buyTonglianWait',{ order_id: res.data.order_id, pay_type: 1 })
            }
            // TODO 跳转
            if (res.data && res.data.redirect_url) {
              this.$Error('支付成功')
              setTimeout(() => {
                openPage(res.data.redirect_url)
              }, 1000)
            }
          
        } else {
          this.$Error(res.msg)
        }
      })
    },
    paymentData(val) {
      // // console.log(val, '支付')
      setTimeout(() => {
        this.showPayment()
      }, 100)
    },
    // 隐藏支付方式
    showPayment() {
      // this.$refs.payments.showWxpay = true
      this.$refs.payments.showJdpay = false
      this.$refs.payments.showYlPay = false
      this.$refs.payments.showPayPalPay = false
      this.$refs.payments.showBeiBaoPal = false
      this.$refs.payments.showPeerPal = false
      this.$refs.payments.showYeePal = false
      this.$refs.payments.showNewYeePal = false
      this.$refs.payments.showKltPal = false
      this.$refs.payments.showKqPay = false
      this.$refs.payments.showHdfkPay = false
      this.$refs.payments.showXxPay = false
      // this.$refs.payments.showTlWxPay = false
      this.$refs.payments.showTlAliPay = false
      this.$refs.payments.showHtPay = false
      this.$refs.payments.showGlobalAlipay = false
    }
  },
  created() {
    this.init()
  }
})
</script>

<style lang="scss">
@import "../../../styles/mixin";
@import "src/styles/order/orderBuy";
  .price-wrap{
    padding: 40px;
    text-align: center;
    font-size: 28px;
    .price{
      color: #FF0000;
      font-size: 72px;
      margin-top: 30px;
      font-weight: bold;
      .unit{
        font-size: 28px;
        margin-right: 10px;
      }
    }
  }
</style>
